<!--
 * @Description:  
 * @Version: 1.0
 * @Author: tao
 * @Date: 2021-01-15 16:19:27
 * @LastEditors: tao
 * @LastEditTime: 2021-03-26 23:34:58
-->
<template>
  <div class="home">
    <Header class="header"></Header>
    <div class="section">
      <LeftNav class="leftNav"></LeftNav>
      <div class="main">
        <div class="main_content">
          <div class="aside">
            <router-view></router-view>
          </div>
          <div class="footer">
            Copyright © 2021-{{ year }} 网络技术系-质量信息管理系统
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftNav from "components/common/leftNav/LeftNav";
import Header from "components/common/header/Header";
export default {
  components: {
    LeftNav,
    Header,
  },
  data() {
    return {};
  },
  computed: {
    year() {
      return new Date().getFullYear();
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  min-height: 100%;
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    position: fixed;
    z-index: 1;
  }

  .section {
    width: 100%;
    flex: 1;
    display: flex;
    .leftNav {
      position: fixed;
      top: 64px;
      height: 100%;
      z-index: 1;
    }

    .main {
      margin-left: 200px;
      margin-top: 64px;
      flex: 1;
      width: 100%;
      padding: 0 24px;
      display: flex;
      flex-direction: column;
      background: #f2f2f2;
      .main_content {
        width: 100%;
        margin-top: 24px;
        flex: 1;
        display: flex;
        flex-direction: column;
        .aside {
          flex: 1;
          padding: 20px;
          background: #ffffff;
          // margin-bottom: 16px;
        }

        .footer {
          text-align: center;
          margin: 16px auto;
        }
      }
    }
  }
}
</style>